<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<form class="layui-form" lay-filter="therapist-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">时间范围</label>
            <div class="layui-input-inline">
                <input class="layui-input ares-w-auto" readonly id="therapist-date" placeholder=" - ">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选择分组</label>
            <div class="layui-input-inline">
                <select name="therapist-group-select" lay-filter="therapist-group-select"></select>
            </div>
        </div>
    </div>
</form>
<div id="therapist-echart1" class="echart"></div>

<div id="therapist-brief">
    <div id="therapist-all-cost" class="ares-border-top ares-mt"></div>
    <div id="therapist-echart2" class="echart"></div>
    <table id="therapist-count-table" class="layui-hide" lay-filter="therapist-count-table"></table>
</div>
<div id="therapist-details" class="layui-hide ares-border-top">
    <div class="ares-pt-sm ares-mb ares-clearfix">
        <span>治疗师 : <b id="therapist-details__therapist-name"></b></span>
        <span class="ares-mx-lg">分组 : <b id="therapist-details__group"></b></span>
        <span>收款明细 : <b id="therapist-details__cost"></b></span>
        <button id="show-brief-btn" class="ares-float-right layui-btn layui-btn-xs layui-btn-primary ares-ml-lg">返回</button>
        <div id="therapist-details__count-btns" class="ares-float-right">
            <button data-type="1" class="layui-btn layui-btn-xs layui-btn-normal">评估明细</button>
            <button data-type="2" class="layui-btn layui-btn-xs">训练明细</button>
        </div>

    </div>
    <div id="therapist-details__items" class="ares-row"></div>
    <div class="ares-text-right ares-border-top">
        共计 : <span id="therapist-details__total"></span>
    </div>
</div>

<script type="text/html" id="therapistCountTab">
    <button class="layui-btn layui-btn-xs" lay-event="detail">详情</button>
</script>
<script>
    $(function ($) {
        var defaultStartTime = +new Date().setMonth(new Date().getMonth() - 1),
            defaultEndTime = +new Date();
        var type = 1,
            currentRow = {},
            pieName = [],
            pieValue = [],
            pieOption = {
                title: {
                    subtext: "按治疗组",
                    left: 70,
                    top: 20
                },
                tooltip: {
                    trigger: 'item',
                    confine: true,
                    formatter: "{b} : ({c}元) ({d}%)"
                },
                legend: {
                    top: 'bottom',
                    itemWidth: 14,
                    data: pieName
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '85%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: pieValue,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                color: ['#33CC66', '#3399FF', '#FF0000', '#9966CC', 'pink']
            },
            lineX = [],
            lineY = [],
            lineOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    /*feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }*/
                },
                legend: {
                    data: ['治疗师收费']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: lineX,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '费用(元)',
                        /* min: 0,
                    max: 250,
                    interval: 30, */
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '收费',
                        type: 'bar',
                        data: lineY
                    }
                ]
            };

        renderTreatmentGroup('therapist-form', 'therapist-group-select');
        laydate.render({
            elem: '#therapist-date',
            range: true,
            value: dateFilters.dateFormat(defaultStartTime) + ' - ' + dateFilters.dateFormat(defaultEndTime),
            done: function (value, date, endDate) {
                var range = value.split(' - '),
                    groupId = form.val('therapist-form')['therapist-group-select'];
                getPie(+new Date(range[0]), +new Date(range[1]));
                getLineAndTable(groupId, +new Date(range[0]), +new Date(range[1]));
                countCost(currentRow.therapistId, +new Date(range[0]), +new Date(range[1]), type);
            }
        });
        form.on('select(therapist-group-select)', function (data) {
            var range = $('#therapist-date').val().split(' - '),
                groupId = data.value;
            getLineAndTable(groupId, +new Date(range[0]), +new Date(range[1]));
        });
        $('#show-brief-btn').on('click', function () {
            currentRow = {};
            $("#therapist-brief").removeClass("layui-hide");
            $("#therapist-details").addClass("layui-hide");
        })
        getPie(defaultStartTime, defaultEndTime);
        getLineAndTable(form.val('therapist-form')['therapist-group-select'], defaultStartTime, defaultEndTime);

        //治疗师收费饼图
        function getPie(startDate, endDate) {
            mandyServices.mandy_get_overall_charges_static(startDate, endDate).then(function (res) {
                console.log('治疗师收费饼图', res)
                var data = res.data,
                    chargesStaticDTOs = data.chargesStaticDTOs;
                $.each(chargesStaticDTOs, function (idx, list) {
                    pieName.push(list.groupName);
                    pieValue[idx] = {};
                    pieValue[idx].name = list.groupName;
                    pieValue[idx].value = list.total;
                })
                var therapistEchart1 = echarts.init($("#therapist-echart1")[0]);
                therapistEchart1.setOption(pieOption);
            })
        }

        //治疗师收费柱状图及列表
        function getLineAndTable(groupId, startDate, endDate) {
            mandyServices.mandy_get_overall_charges_static_detail(groupId, startDate, endDate).then(function (res) {
                console.log('治疗师收费柱状图', res)
                var data = res.data,
                    chargesStaticDTOs = data.chargesStaticDTOs || [];
                $("#therapist-all-cost").text("收费总数 : " + data.total + "元");
                $.each(chargesStaticDTOs, function (index, item) {
                    var chargesDTOs = item.chargesDTOs;
                    var e = {},
                        t = {};
                    $.each(chargesDTOs, function (i, v) {
                        if (v.itemType == 1) {
                            e.number = v.number;
                            e.fee = v.fee;
                        } else if (v.itemType == 2) {
                            t.number = v.number;
                            t.fee = v.fee;
                        }
                    })
                    item.e = e;
                    item.t = t;
                })
                table.render({
                    elem: '#therapist-count-table',
                    data: chargesStaticDTOs,
                    cellMinWidth: 80,
                    cols: [[
                        {title: '治疗师', field: 'therapistName'},
                        {title: '分组', field: 'groupName'},
                        {title: '收费', field: 'total'},
                        {
                            title: '评估次数',
                            templet: function (d) {
                                return d.e.number;
                            }
                        },
                        {
                            title: '评估收费',
                            templet: function (d) {
                                return d.e.fee;
                            }
                        },
                        {
                            title: '训练次数', width: 150,
                            templet: function (d) {
                                return d.t.number;
                            }
                        },
                        {
                            title: '训练收费', width: 150,
                            templet: function (d) {
                                return d.t.fee;
                            }
                        },
                        {title: '操作', fixed: 'right', width: 60, templet: '#therapistCountTab'}
                    ]]
                });
                table.on('tool(therapist-count-table)', function (obj) {
                    switch (obj.event) {
                        case 'detail':
                            checkDetail(obj.data);
                            break;
                    }
                    ;
                });
                var chart = data.chart;
                lineX.length = 0;
                lineY.length = 0;
                $.each(chart, function (idx, list) {
                    lineX.push(list.date);
                    lineY.push(list.fee);
                })
                var therapistEchart2 = echarts.init($("#therapist-echart2")[0]);
                therapistEchart2.setOption(lineOption);
            })
        }

        //治疗师收费列表查看详情
        function checkDetail(data) {
            currentRow = data;
            type = 1;
            $("#therapist-brief").addClass("layui-hide");
            $("#therapist-details").removeClass("layui-hide");
            $("#therapist-details__count-btns button[data-type = 1]").addClass("layui-btn-normal").siblings().removeClass("layui-btn-normal");
            var timeRange = $('#therapist-date').val().split(' - ');
            var $therapistDetailsItems = $("#therapist-details__items");
            $therapistDetailsItems.empty();
            mandyServices.mandy_get_therapist_charges_static(currentRow.therapistId, +new Date(timeRange[0]), +new Date(timeRange[1])).then(function (res) {
                var data = res.data;
                $("#therapist-details__therapist-name").text(data.therapistName);
                $("#therapist-details__group").text(data.groupName).data("groupId", data.groupId);
                $("#therapist-details__cost").text("总额 " + data.total + "元");
                var chargesDTOs = data.chargesDTOs;
                var items = [];
                $.each(chargesDTOs, function (i, v) {
                    if (v.itemType == type) {
                        items[type] = v;
                    }
                })
                $("#therapist-details__total").text(items[type].number + "次 / " + items[type].fee + "元");
                $.each(items[type].chargeDetailDTOs, function (idx, val) {
                    $therapistDetailsItems.append('<div class="ares-col-md-3 ares-col-lg-2">' +
                        '<div class="ares-text-center ares-rounded-sm ares-bg-whitesmoke ares-p-sm">' +
                        '<p class="detail-item-name ares-text-truncate" title="' + val.itemName + '">' + val.itemName + '</p>' +
                        '<p class="detail-item-cost">' + val.number + ' 次 / ' + val.fee + '元</p>' +
                        '</div>' +
                        '</div>');
                })
            })
        }

        //治疗师收费列表查看详情(评估\训练切换)
        function countCost(startTime, endTime, type) {
            var groupId = $("#therapist-details__group").data("groupId");
            var $therapistDetailsItems = $("#therapist-details__items");
            $therapistDetailsItems.empty();
            mandyServices.mandy_get_therapist_charges_static(currentRow.therapistId, startTime, endTime).then(function (res) {
                var data = res.data;
                $("#therapist-details__cost").text("总额 " + data.total + "元");
                var chargesDTOs = data.chargesDTOs;
                var items = [];
                $.each(chargesDTOs, function (i, v) {
                    if (v.itemType == type) {
                        items[type] = v;
                    }
                })

                $("#therapist-details__total").text(items[type].number + "次 / " + items[type].fee + "元");
                $.each(items[type].chargeDetailDTOs, function (idx, val) {
                    $therapistDetailsItems.append('<div class="ares-col-md-3 ares-col-lg-2">' +
                        '<div class="ares-text-center ares-rounded-sm ares-bg-whitesmoke ares-p-sm">' +
                        '<p class="detail-item-name ares-text-truncate" title="' + val.itemName + '">' + val.itemName + '</p>' +
                        '<p class="detail-item-cost">' + val.number + ' 次 / ' + val.fee + '元</p>' +
                        '</div>' +
                        '</div>');
                })
            })
        }

        $("#therapist-details__count-btns button").click(function () {
            var timeRange = $('#therapist-date').val().split(' - ');
            type = $(this).data("type");
            $(this).addClass("layui-btn-normal").siblings().removeClass("layui-btn-normal");
            countCost(+new Date(timeRange[0]), +new Date(timeRange[1]), type)
        })

    })
</script>
</body>
</html>